<template>
<div class="the-header">
 <div class="header-logo" @click="goHome">
    <svg class="icon">
      <use xlink:href="#icon-erji"></use>
    </svg>
   <span>BuleHeart</span>
 </div>
  <ul class="navbar">
    <li :class="{active:active==item.name}" v-for="(item,index) in navMsg" :key="item.path" @click="goPage(item.path,item.name)">
       {{item.name}}
    </li>
    <li>
      <div class="header-search">
        <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch" v-model="keyWords"></input>
        <div class="search-btn" @click="goSearch">
          <svg class="icon">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
      </div>
    </li>
    <li v-show="loginInfo" :class="{active:active==item.name}" v-for="(item,index) in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
      {{item.name}}
    </li>
  </ul>
  <div class="header-right" v-show="!loginInfo">
    <div id='user'>
      <img :src="avator">
    </div>
    用户名：{{userName}}
    <ul class="menu">
      <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path,item.name)">{{item.name}}</li>
    </ul>
  </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
name: "Header",
  methods:{
  goHome(){
    this.$router.push({path:'/home',query:{name:'首页'}})
    location.reload()
  },
    goPage(path,name){
    this.$router.push({path:path,query:{name:name}})
    },
    goSearch(){
    this.$router.push({path:'/search',query:{keyWords:this.keyWords}})
    },
    async goMenuList(path,name){
       if (name=='退出'){
      let result=await this.$API.reqConsumerLogout()
         if (result.code==10000){
           this.$notify.success('退出成功')
           localStorage.removeItem('Token')
           sessionStorage.removeItem('store')
           this.$store.commit('LOGININFO',true)
           await this.$router.push({path:'/home',query:{name:'首页'}})
         }else {
          await Promise.reject(new Error('fail'))
         }
       }else {
        await this.$router.push({path:'/setting',query:{name:name}})
       }
    }
  },
  data(){
  return{
    //导航栏
    navMsg:[
      {name:'首页',path:'/home'},
      {name:'歌单',path:'/songList'},
      {name:'歌手',path:'/singer'},
      {name:'我的音乐',path:'/myMusic'}
    ],
    keyWords:'',
    loginMsg:[
      {name:'登录',path:'/login'},
      {name:'注册',path:'/register'}
    ],
    menuList :[
      {name: '设置',path: '/setting'},
      {name: '退出',path: '/home'}
    ]
  }
  },
  mounted() {
    document.querySelector('#user').addEventListener('click',function(e){
      document.querySelector('.menu').classList.add("show");
      e.stopPropagation()           //关键在于阻止冒泡
    },false);
    document.querySelector('.menu').addEventListener('click',function(e){
      e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
    },false);
    document.addEventListener('click',function(){
      document.querySelector('.menu').classList.remove('show');
    },false);
  },
  computed:{
  active(){
    return this.$route.query.name
  },
    ...mapState({
      loginInfo:state => state.home.loginInfo,
      avator:state => state.home.avator,
      userName:state => state.home.userName
    }),
    getAvator(){
    return sessionStorage.getItem('avator')
    }
  }
}
</script>

<style scoped lang="sass">
@import "../assets/css/the-header.scss"
</style>
